<template>
  <div>

    <div class="shiti_container">
      <div class="catagory frame shiti_top">
        <p><b>科目：</b>
          <a v-for="sub in pt_channel" v-on:click="checkselect({check_channel:sub.id})" v-bind:class="{'search-choose':sub.id==check_channel}" >
            {{sub.desc}}
          </a>
        </p>
        <p v-show="pt_grade.length==0?false:true ">
        <b>适用年级</b>
          <a v-for="grade in pt_grade" v-on:click="checkselect({check_grade:grade.id})" v-bind:class="{'search-choose':grade.id==check_grade}"  >
            {{grade.desc}}
          </a>
        </p>
        <p><b>试卷年份</b>
          <a v-for="year in pt_year" v-on:click="checkselect({check_year:year.id})"v-bind:class="{'search-choose':year.id==check_year}"  >
            {{year.desc}}
          </a>
        </p>
        <p><b>试卷类型</b>
          <a v-for="ptype in pt_type" v-on:click="checkselect({check_papertype:ptype.id})" v-bind:class="{'search-choose':ptype.id==check_papertype}"  >
            {{ptype.desc}}
          </a>
        </p>
        <p><b>试卷省份</b>
          <a v-for="area in pt_area" v-on:click="checkselect({check_area:area.id})" v-bind:class="{'search-choose':area.id==check_area}"  >
            {{area.desc}}
          </a>
          <span class="cl"></span>
        </p>
      </div>
    </div>
    <div class="frame questions">
      <h2><b></b>
      </h2>
      <div class="questions_col">
        <ul>
          <li v-for="timu in timulist"><!--<br />-->
            <div id="vhtml" v-html="timu.tquestion">
              {{timu.tquestion}}
            </div>
            <router-link :to="{name:'tianalysis',params:{timu:timu}}"  class="view_all to-zujuan">查看详情</router-link>
          </li>

          <ul>
          </ul></ul></div>
    </div>
    <div class="fenye"><div class="pg">
      <a v-if="pageno!=1" v-on:click="setpage(pageno-1)">上一页</a>
      <a v-on:click="setpage(no)" v-for="no in pagenoarr" v-bind:class="[no==pageno?'selectpage':'']" >{{no}}</a>
      <a v-if="pageno!=totalpage" v-on:click="setpage(pageno+1)">下一页</a>

    </div></div>
  </div>

</template>
<script type="text/javascript">
  import {mapState,mapMutations} from 'vuex'
    export default {
    data() {
      return {

      }

    },
    mounted(){
      this.loadtilist();
    },
    watch:{
      content_type:function(v){
        this.loadtilist();

      },
      check_grade:function(v){
        this.loadtilist();
      },
      check_channel:function(v){
        this.loadtilist();

      },
      check_area:function(v){
        this.loadtilist();

      },
      check_papertype:function(v){
        this.loadtilist();

      },
      check_year:function(v){
        this.loadtilist();
      },
      pageno:function(v){
        this.loadtilist();
      }


    } ,



    computed:mapState({
      content_type:'content_type',
      types:'types',
      subjects:'subjects',
      //题目列表
      timulist:'timulist',
      totalpage:'totalpage',
      pageno:'pageno',
      pt_chuzhong:'pt_chuzhong',
      pt_gaozhong:'pt_gaozhong',
      pt_channel:'pt_channel',
      pt_type:'pt_type',
      pt_year:'pt_year',
      pt_area:'pt_area',
      pt_grade:'pt_grade',

      check_grade:'check_grade',
      check_channel:'check_channel',
      check_area:'check_area',
      check_papertype:'check_papertype',
      check_year:'check_year',
      pagenoarr(state){
        var arr=[];
        if(state.totalpage<=10){
        for(var i=1;i<=state.totalpage;i++){
         arr.push(i);
        }
        }
        else {
          var start=1;
          var end=1;
          start=state.pageno-5;
          if(start<=1) start=1;
          end=state.pageno+4;
          if(end>=state.totalpage) end=state.totalpage;
          for(var i=start;i<=end;i++)
          {
            arr.push(i);
          }
        }
        return arr;
      }
    }),
    methods:{
      setpage(i){
        this.$store.commit('SET_PAGE',{pageno:i});
      },

      selectTiDetail(timu){
        this.$store.dispatch('LOAD_TI_DETAIL',{tid:timu.id});
      },
       checkselect:function({check_channel,check_area,check_grade,check_year,check_papertype}){
          this.$store.commit('INIT_CHECK_PAPER',{check_channel,check_area,check_grade,check_year,check_papertype});
          this.loadtilist();
       },
      //重新刷新页面
      loadtilist(){
        this.$store.dispatch('LOAD_LEFT_RECOMMED');
        this.$store.dispatch('LOAD_TIMU_LIST');
      },

      selectSubject(sub){
        this.$store.commit('SET_TYPE',{types:sub.types});
        this.$store.commit('SET_CHECK_SUBJECT',{subject:sub.id});
        //刷新左侧推荐菜单
        this.$store.dispatch('LOAD_LEFT_RECOMMED');
        this.$store.dispatch('LOAD_TIMU_LIST');
      },
      selectType(type){
        this.$store.commit('SET_CHECK_TYPE',{subject:type.id});
        //刷新左侧推荐菜单
        this.$store.dispatch('LOAD_LEFT_RECOMMED');
        //刷新题目列表
        this.$store.dispatch('LOAD_TIMU_LIST');
      },

      //
     refreshRemdAndList(){

     },
      clickDetail(timu){
       var tid=timu.id;
       alert(tid);
       this.$store.dispatch('LOAD_TI_DETAIL',{tid});
        //this.$router.push('tianalysis');
       this.$store.dispatch('LOAD_SIMILARTIS',{tid});
      }
    }

  }



</script>
<style type="text/css">
  body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
  }
  dt {
    font-weight:400;
  }
  body {
    font: 12px/1.8 "宋体","Microsoft YaHei",arial,sans-serif;
    background-color: #fff;
    color: #333;
    background-attachment: fixed;
  }
  .shiti_top, .shijuan_top {
    padding: 5px 0px;
  }
  a.search-choose, .catagory .current {
    color: #fff;
    background-color: #0f9d58;
  }

  .catagory a:hover, .catagory a.curren, .catagory a.search-choose, .catagory .current {
    color: #fff;
    background-color: #0f9d58;
  }
  .catagory {
    margin-bottom: 12px;
  }

  .selectpage {
    background-color: #62AF89;
  }
  .frame {
    border: 1px solid #d8d8d8;
  }
  a:hover, #topbar a:hover, h1 a.more:hover, .catagory_container a:hover, .catagory_container .unit li a:hover, .shengming p a:hover, .download_link, .links p a:hover {
    text-decoration: none;
    color: #e23131;
  }
  .catagory b, .catagory a {
    font-size: 12px;
    line-height:27px;
    float: left;
  }
  .catagory a {
    padding: 2px 5px 3px;
    _padding: 4px 5px 1px;
    margin: 5px;
    line-height: 12px;
    color: #666;
  }
  .catagory b, .catagory a {
    font-size: 12px;
    float: left;
  }
  .shiti_top p {
    width: 687px;
    overflow: hidden;
    padding-left: 15px;
  }

  .questions {
    padding: 0px 15px;
    margin-bottom: 12px;
  }
  .frame {
    border: 1px solid #d8d8d8;
  }
  .questions_col li a.view_all {
    background-position: 0px -89px;
    margin-right: 10px;
    float: right;
    width: 103px;
    height: 40px;
    color: #fff;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    font-weight: bold;
    font-family: "Microsoft YaHei";
  }
  .questions_col li {
    padding-top: 20px;
    padding-bottom: 10px;
    line-height: 26px;
    border-bottom: 1px dashed #0f9d58;
    position: relative;
    width: 687px;
    overflow: hidden;
  }
  li {
    list-style: none;
  }
  .questions_col li a.view_all {
    background-color: #00A855;
  }
  a{cursor: pointer;}
  div {
    text-align: left;
  }
  .fenye {
    overflow: hidden;
    float: right;
    margin-bottom: 15px;
    margin-top: 10px;
  }
  .jammerd42 {
    display: none;
  }
  .this_jammer {
    display:none;
  }
  .fenye .pg a, .fenye .pg strong, .fenye .pgb a, .fenye .pg label {
    #background-color: #FFFFFF;
    background-repeat: no-repeat;
    border: 1px solid #62AF89;
    color: #333333;
    display: inline;
    float: left;
    height: 26px;
    margin-left: 4px;
    overflow: hidden;
    padding: 0 8px;
    text-decoration: none;
    line-height: 26px;
  }
</style>
